<template>
  <div>
    <el-form label-width="100px" :model="packageData" style="max-width: 460px">
      <el-form-item label="套餐ID" style="display: flex;">
        <el-input v-model="packageData.packId" autocomplete="off" style="width:280px !important" />
        <el-button @click="getAgentById()" style="margin-left: 10px;">提取</el-button>
      </el-form-item>
      <el-form-item label="客货类型">
        {{ packageData.carType == null ? '' : packageData.carType == 0 ? '货车' : '客车' }}
      </el-form-item>
      <el-form-item label="套餐名称">
        {{ packageData.name }}
      </el-form-item>
      <el-form-item label="套餐金额">
        {{ packageData.vipPrice }}
      </el-form-item>
    </el-form>
    <div class="save">
      <el-button type="primary" @click="setPacks()">保存</el-button>
    </div>
  </div>
</template>


<script setup lang="ts" >
import { reactive } from 'vue'
import { ElMessage } from "element-plus";
import { setAgentPacks, findPackVipByIdApi } from "../../../api/index";

//代理商ID
const props = defineProps(["agentId"]);
//关闭当前窗口
const emit = defineEmits(['addCompleted']);
//添加套餐模型
const packageData = reactive({
  agent_id: null,
  packId: null,
  carType: null,
  name: null,
  vipPrice: null,
})

// 根据ID获取套餐信息
const getAgentById = () => {
  findPackVipByIdApi({
    packId: packageData.packId
  }).then((res) => {
    if (res.data.code === 2000) {
      packageData.carType = res.data.data.carType;
      packageData.name = res.data.data.name;
      packageData.vipPrice = res.data.data.vipPrice;
    } else {
      ElMessage.error("查询失败");
    }
  });
};

//添加套餐保存
const setPacks = () => {
  setAgentPacks({
    agent_id: props.agentId,
    packIds: [parseInt(packageData.packId)],
  }).then((res) => {
    if (res.data.code === 2000) {
      ElMessage({
        message: "添加成功.",
        type: "success",
      });
      emit('addCompleted');
    } else {
      ElMessage.error("添加失败");
    }
  });
};

</script>


<style  scoped>
.save {
  width: 100%;
  display: flex;
  justify-content: center;

}
</style>